<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>云盒激活向导</title>
<link rel="stylesheet" type="text/css" href="../static/css/main.css" />
<style type="text/css">
#wizard {border:5px solid #789;font-size:12px;height:500px;margin:20px auto;width:570px;overflow:hidden;position:relative;-moz-border-radius:5px;-webkit-border-radius:5px;}
#wizard .items{width:20000px; clear:both; position:absolute;}
#wizard .right{float:right;}
#wizard #status{height:35px;background:#123;padding-left:25px !important;}
#status li{float:left;color:#fff;padding:10px 30px;}
#status li.active{background-color:#369;font-weight:normal;}
.input{width:240px; height:18px; margin:10px auto; line-height:20px; border:1px solid #d3d3d3; padding:2px}
.page{padding:20px 30px;width:500px;float:left;}
.page h3{height:42px; font-size:16px; border-bottom:1px dotted #ccc; margin-bottom:20px; padding-bottom:5px}
.page h3 em{font-size:12px; font-weight:500; font-style:normal}
.page p{line-height:24px;}
.page p label{font-size:14px; display:block;}
.btn_nav{height:36px; line-height:36px; margin:20px auto;}
.prev,.next,.test{width:100px; height:32px; line-height:32px; background:url(btn_bg.gif) repeat-x bottom; border:1px solid #d3d3d3; cursor:pointer}
</style>
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/scrollable.js"></script>
</head>

<body>

<div id="main">
   <h2 class="top_title">云盒激活向导</h2>
   <p style="height:24px; line-height:24px; margin:16px">开始本向导前，请连接</p>
   <form action="#" method="post">
	<div id="wizard">
		<ul id="status">
			<li class="active"><strong>1.</strong>填写WiFi信息</li>
{#			<li><strong>2.</strong>连接设备</li>#}
			<li><strong>2.</strong>连接服务器</li>
		</ul>

		<div class="items">
			<div class="page">
               <h3>填写WiFi账号密码<br/></h3>
               <p><label>WiFi名称：</label><input type="text" class="input" id="ssid" value="{{ ssid }}"/></p>
               <p><label>密码：</label><input type="password" class="input" id="psw" value="{{ psw }}"/></p>
                   <input type="button" class="test" id="wifi_test" value="连接wifi">
                    <lable id="wifi_test_status">未测试</lable><br>
               <div class="btn_nav">
                  <input type="button" class="next right" id="next1" value="下一步&raquo;" />
               </div>
            </div>
{#			<div class="page">#}
{#               <h3>连接设备<br></h3>#}
{#                <lable>设备串口波特率：</lable>#}
{#                <select name="baud_rate_selector" id="bs">#}
{#                    <option value="115200">115200</option>#}
{#                    <option value="250000">250000</option>#}
{#                </select>#}
{#               <br/>#}
{#               <br/>#}
{#               <br/>#}
{#                   <input type="button" class="test" id="printer_test" value="更改设备连接">#}
{#                    <lable id="printer_test_status">未更改</lable><br>#}
{#               <div class="btn_nav">#}
{#                  <input type="button" class="prev" style="float:left" value="&laquo;上一项" />#}
{#                  <input type="button" class="next right" id="next2" value="下一项&raquo;" />#}
{#               </div>#}
{#            </div>#}
			<div class="page">
               <h3>填写服务器信息<br/></h3>
               <p><label>IP地址：</label><input type="text" class="input" id="ip" value="{{ ip }}"/></p>
               <p><label>设备编号（EID）：</label><input type="text" id="eid" class="input" value="{{ eid }}"/></p>
               <p><label>设备密码：</label><input type="text" class="input" id="pw" value="{{ pw }}"/></p>
                  {# <input type="button" class="test" id="server_test" value="更改服务器连接">#}
                   {# <lable id="server_test_status">未更改</lable><br> #}
               <div class="btn_nav">
                  <input type="button" class="prev" style="float:left" value="&laquo;上一项" />
                  <input type="button" class="next right" id="sub" value="提交更改" />
               </div>
            </div>
		</div>
	</div>
</form><br />
</div>

<script type="text/javascript">
$(function(){
	$("#wizard").scrollable({
		onSeek: function(event,i){
			$("#status li").removeClass("active").eq(i).addClass("active");
		},
		onBeforeSeek:function(event,i){
		}
	});
	$("#wifi_test").click(function () {
        var ssid = $("#ssid").val();
        if(ssid==""){
            alert("请输入用户名！");
            return false;
        }
        var psw = $("#psw").val();
        if(psw==""){
            alert("请输入密码！");
            return false;
        }
	    $("#wifi_test_status").html("正在连接");
        $.post("/api/wifi_setting", {ssid: ssid, psw: psw}, function (data) {
            alert(data);
	        $("#wifi_test_status").html(data);
           if(data == "连接失败")
               return false;
        });
    });
	$("#sub").click(function(){
       let ip = $("#ip").val();
	    if(ip == ""){
	        alert("请输入IP");
	        return false;
        }
	    let eid = $("#eid").val();
	    if(eid == ""){
	        alert("请输入设备编号");
	        return false;
        }
	    let pw = $("#pw").val();
	    if(pw == ""){
	        alert("请输入设备密码");
	        return false;
        }
        
         $.post("api/server_save", {ip: ip, eid: eid, pw: pw}, function (data) {
	    
            alert(data);

           if(data == "连接失败")
               return false;
        });
		
        window.location.href = "/index"
	});
	
    $("#printer_test").click(function () {
        let baud_rate = $("#bs").val();
	    $("#printer_test_status").html("正在更改");
        $.post("api/printer_test", {baud_rate: baud_rate}, function (data) {
	        $("#printer_test_status").html(data.replace("连接","更改"));
            alert(data);
           if(data == "连接失败")
               return false;
        });
    })
});
</script>
</body>
</html>
